
import {buttonProps} from "./botton"
import {ExtractPropTypes,computed} from "vue"
import {TinyColor} from "@ctrl/tinycolor"

//ExtractPropTypes是用来限制defineprops类型的
type Props = ExtractPropTypes<typeof buttonProps>

// 

export function useButtonCustomStyle(props:Props){
    

    return computed(()=>{
        let styles={}
        // console.log(props,"props")
        let buttonStyle =props.color
        if(buttonStyle){
                const color = new TinyColor(buttonStyle)
                
            if(props.plain){
                // console.log(color.tint(90).toString(),"color")
                styles = {
                    "background-color":color.tint(90).toString(),
                    color:buttonStyle,
                    "--hover-background-color-1":buttonStyle,
                    "--hover-color":buttonStyle,
                    "border-color":buttonStyle
            
                }

            }else{
                styles = {
                    "background-color":buttonStyle,
                    color:"#fff",
                    "--hover-background-color-1":buttonStyle,
                    // "--hover-color":"pink",
                    "--hover-background-color-5":buttonStyle,
                   
                }
            }

        }
       return styles
       
    })

}


// type YaoProps = ExtractYao< typeof buttonProps>

// type ExtractYao<T extends object> ={
//     readonly  [P in keyof T]:T[P]
// }